<!-- 这是用来画【饼图】的vue组件-->

<template>
    <li>
        <e-charts class="chart" :option="option" />
    </li>
</template>
  
<script>

export default {
    name: 'TimePie',
    props: ['client_time', 'client_id'],
    data() {
        return {

        }
    },

    computed: {
        option() {
            if (this.client_id == 1) {
                console.log('TimePie_data #', this.client_time, 'client_id #', this.client_id)
            }

            let dataTmp = []

            //必须先判断 this.client_time 是否为 undefined！！
            if (this.client_time) {
                dataTmp.push({
                    value: this.client_time["Network"],
                    name: 'Network'
                })
            }

            for (let item in this.client_time) {
                if (item.indexOf('Client') != -1) {  //说明key为client层
                    dataTmp.push({
                        value: this.client_time[item],
                        name: `Client${this.client_id}_L${item[item.length - 1]}`
                    })
                }
                else if (item.indexOf('Server') != -1) {  //说明key为Server层
                    dataTmp.push({
                        value: this.client_time[item],
                        name: `Server_L${item[item.length - 1]}`
                    })
                }
            }

            return {
                title: {
                    text: `Time Pie of Client ${this.client_id}`,
                    // subtext: `Client ${this.client_id}`,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        // name: `Client ${this.client_id}`,
                        type: 'pie',
                        radius: '50%',
                        data: dataTmp,
                        label: {
                            fontStyle: "oblique"
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
        }

    },

}
</script>
  
<style scoped>
.chart {

    /* 这里的能修改背景颜色的宽高 */
    width: 570px;
    height: 300px;

    /* border-right: 10px solid #bfd1eb; */
}
</style>
  